<template>
  <div class="company-info">
    <div class="top_wrap">
      <div class="nav">
        <van-icon name="arrow-left"
          color="#fff"
          size="16px"
          @click="onClickLeft" />
        <div class="icon">
          <van-icon name="plus"
            color="#fff"
            size="16px" />
          关注
        </div>
      </div>
      <div class="company_name">{{state.companyInfo.title}}</div>
    </div>
    <div class="bottom_wrap">
      <div class="introduce">
        <div class="img">
          <img :src="state.companyInfo.logoUrl"
            alt="">
        </div>
        <div class="tags">
          <span>{{state.companyInfo.companyType}}|{{state.companyInfo.companyRange}}|{{state.companyInfo.companyRange}}</span>
        </div>
        <p class="intro_detail">{{state.companyInfo.description}}</p>
      </div>
      <div class="work_time box">
        <h3>工作时间</h3>
        <p><span v-for="(time,index) in state.companyInfo.wokTime"
            :key="index">{{time}}</span></p>
      </div>
      <div class="work_welf">
        <h3>员工福利</h3>
        <div class="item"
          v-for="(welf,index) in state.companyInfo.welfare"
          :key="index">
          <div class="left">
            <img :src="welf.img"
              alt="">
          </div>
          <div class="right">
            <h3>{{welf.title}}</h3>
            <p>{{welf.descp}}</p>
          </div>
        </div>
      </div>
      <div class="company_site box">
        <h3>官网地址</h3>
        <p>{{state.companyInfo.siteUrl}}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue'
  import { getCompanyList, ICompanyInfoTwo, getCompanyInfo, ICompanyInfo } from '@/api/work'
  import { rAF } from 'element-plus/es/utils'
  const emit = defineEmits(['onClickLeft'])
  const onClickLeft = () => {
    console.log(111)
    emit('update:close-company')
  }
  const props = defineProps({
    companyId: {
      type: String
    }
  })
  onMounted(() => {
    lookCompany()
  })
  type StateType = {
    companyInfo: ICompanyInfo
  }
  const state: StateType = reactive({
    companyInfo: {}
  })
  const lookCompany = async () => {
    try {
      let rs = await getCompanyInfo(props.companyId)
      state.companyInfo = rs.data
    } catch (err) {
      console.log(err)
    }
  }
</script>


<style lang="less" scoped>
.company-info {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: #fff;
  width: 100vw;
  height: 100vh;
  padding-bottom: 20px;
  overflow: auto;
  .top_wrap {
    height: 125px;
    padding: 20px 0;
    background: linear-gradient(to right, #6db260, #3da632);

    .nav {
      padding: 0 13px;
      height: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon {
        border: 1px solid #fff;
        border-radius: 15px;
        padding: 3px 7px;
        color: #fff;
      }
    }
    .company_name {
      margin-top: 50px;
      font-size: 20px;
      color: #fff;
      // text-align: center;
      margin-left: 100px;
    }
  }
  .bottom_wrap {
    padding: 0 13px;
    .introduce {
      position: relative;
      .img {
        position: absolute;
        top: -35px;
        left: 0;
        width: 75px;
        height: 75px;
        img {
          // border-radius: 50%;
          width: 75px;
          height: 75px;
        }
      }
      .tags {
        margin-top: 15px;
        margin-left: 85px;
        font-size: 12px;
        color: #3c3c3c;
        // transform: scale(0.8) translate(20px);
      }
      .intro_detail {
        margin-top: 10px;

        font-size: 12px;
        margin-left: 85px;
        color: #8d8d8d;
        // transform: scale(0.7) translate(20px);
      }
    }
    .box {
      margin-top: 20px;
      h3 {
        font-weight: 600;
        font-size: 15px;
      }
      p {
        margin-top: 20px;
        font-size: 12px;
        color: #8d8d8d;
      }
    }
    .work_welf {
      padding: 22px 0;
      border-bottom: 1px solid #f4f4f4;
      align-content: space-between;
      > h3 {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 25px;
      }
      .item {
        // margin-top: 25px;
        display: flex;
        padding-bottom: 20px;

        .left {
          img {
            width: 60px;
            height: 60px;
          }
          margin: 0 30px 0 0px;
        }
        .right {
          flex: 1;
          h3 {
            margin-top: 5px;
            font-weight: 600;
            font-size: 15px;
            color: #6b6b6b;
          }
          p {
            margin-top: 14px;
            font-size: 12px;
            color: #c9c9c9;
          }
        }
      }
    }
  }
}
</style>